<template>
  <div id="Daily">
    <el-tabs
      :tab-position="tabPosition"
      :value="name"
      @tab-click="handleClick"
      style="height: 100%; width: 137px"
    >
      <el-tab-pane
        :name="item.path"
        :label="item.label"
        v-for="(item, index) in Daily_sidebar"
        :key="index"
      ></el-tab-pane>
    </el-tabs>
    <el-main class="Daily_main">    <router-view></router-view></el-main>

  </div>
</template>

<script>
export default {
  props: {},
  components: {},
  data() {
    return {
      tabPosition: "left",
      name: "/home/Daily/Daily_Material_Dpplication",
      Daily_sidebar: [
        { path: "/home/Daily/Daily_Material_Dpplication", label: "物资申请" },
        {
          path: "/home/Daily/Daily_Conference_Room_Dpplication",
          label: "会议室申请",
        },

        {
          path: "/home/Daily/Daily_Repair_Application",
          label: "报修申请",
        },
        {
          path: "/home/Daily/Daily_Activity_Management",
          label: "活动管理",
        },
        {
          path: "/home/Daily/Daily_Award_Collection",
          label: "奖状收集",
        },

        {
          path: "/home/Daily/Daily_Feedback",
          label: "意见反馈",
        },
      ],
    };
  },
  methods: {
    handleClick(tab, event) {
      this.name = tab.name;
      this.$router.push(this.name);
      window.sessionStorage.setItem("Daily_name", this.name);
    },
  },
  created() {
    let namebox = window.sessionStorage.getItem("Daily_name");
    if (namebox != null) {
      this.name = window.sessionStorage.getItem("Daily_name");
      this.$router.push(this.name);
    }
  },
};
</script>

<style lang="less">
#Daily {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
  display: flex;
  .el-tabs__item {
    height: 50px;
    //垂直居中
    line-height: 50px;
    //水平剧中
    text-align: center;
  }
}

.Daily_main {
  position: absolute;
  left: 110px;
  right: 0;
  top: 0;
  bottom: 0;
  
  overflow: hidden;
}
.Daily_main::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #fff;
}
.Daily_main::-webkit-scrollbar {
  width: 6px;
}

.Daily_main:hover::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}
</style>